<template>
  <div class="time-down flex-x" style="margin-right: 20px">
    <div style="color: #36d6d0; font-size: 18px; font-weight: bold">
      项目倒计时:
    </div>
    <dv-digital-flop :config="ddd" style="width: 180px; height: 20px" />
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "TimeRangPage",
  props: {
    startTime: {
      default: "2022-12-31 00:00:00",
    },
    endTime: {
      default: "2022-11-15 00:00:00",
    },
  },
  data() {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      timeSetInterval: null,
      showTimeDown: false,
      showOver: false,
    };
  },
  created() {
    if (moment(new Date()).isBefore(this.startTime)) {
      this.showTimeDown = true;
      this.timeDown();
    }
    if (moment(new Date()).isAfter(this.endTime)) this.showOver = true;
  },
  methods: {
    timeDown() {
      this.timeSetInterval = setInterval(() => {
        if (moment(this.startTime).isBefore(moment())) {
          this.showTimeDown = false;
          clearInterval(this.timeSetInterval);
          location.reload();
        }
        let dur = moment.duration(moment(this.startTime) - moment(), "ms");
        this.days = dur.get("days");
        this.hours = dur.get("hours");
        this.minutes = dur.get("minutes");
        this.seconds = dur.get("seconds");
      }, 1000);
    },
  },
  computed: {
    ddd() {
      return {
        number: [this.dayNum, this.hourNum, this.minuteNum, this.secondNum],
        content: "{nt}天{nt}时{nt}分{nt}秒",
        toFixed: 0,
        textAlign: "center",
        style: {
          fontSize: 20,
        },
      };
    },
    dayNum() {
      if (this.days < 10) return 0 + this.days;
      return this.days;
    },
    hourNum() {
      if (this.hours < 10) return 0 + this.hours;
      return this.hours;
    },
    minuteNum() {
      if (this.minutes < 10) return 0 + this.minutes;
      return this.minutes;
    },
    secondNum() {
      if (this.seconds < 10) return 0 + this.seconds;
      return this.seconds;
    },
  },
};
</script>

<style>
</style>